import Head from "next/head";
import Image from "next/image";
import styles from "../styles/Home.module.css";
import {
  Input,
  InputGroup,
  InputLeftElement,
  InputRightElement,
  Box,
  Grid,
  Button,
  Flex,
  Text,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  FormControl,
  FormLabel,
} from "@chakra-ui/react";
import { HiOutlineSearch } from "react-icons/hi";
import { TiMicrophone } from "react-icons/ti";
import { GrFormClose } from "react-icons/gr";
import { IoAdd, IoClose } from "react-icons/io5";
import { useState } from "react";
import { css } from "@emotion/react";
import { useDisclosure } from "@chakra-ui/hooks";
import { v4 as uuidv4 } from "uuid";
import { Link } from "@chakra-ui/layout";
export default function Home() {
  const [hoverType, setHoverType] = useState(false);

  const [urlObj, setUrlObj] = useState({
    name: "",
    url: "",
    uuid: "",
    img: "",
  });

  const [urlData, setUrlData] = useState([]);

  const iconStyle = {
    position: "absolute",
    top: "4px",
    right: "4px",
  };
  const deplay = {
    transitionDelay: "400ms",
  };
  // 初始化弹框关闭开启状态
  const { isOpen, onOpen, onClose } = useDisclosure();

  function DeleteListItem(item, e) {
    urlData.forEach((urlDataitem, index) => {
      if (urlDataitem.uuid === item.uuid) {
        urlData.splice(index, 1);
        setUrlData(urlData);
      }
    });
    console.log("合成事件");
    // 阻止事件冒泡，（阻止这个合成事件，往document上冒泡，因此不会触发click方法）
    e.stopPropagation();
  }
  function aDDListItem() {
    // 添加事件
    if (urlObj.url.indexOf("https") === 0) {
      urlObj.img = urlObj.url + "/favicon.ico";
    } else {
      urlObj.img = "https://" + urlObj.url + "/favicon.ico";
    }
    urlObj.uuid = uuidv4();
    urlData.push(urlObj);
    onClose();
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Google</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          <img src="/images/google.png"></img>
        </h1>
        <Box marginTop="38px" mb="16px" w={561}>
          <InputGroup size="lg">
            <InputLeftElement
              children={<HiOutlineSearch color="green.500" />}
            />
            <Input
              placeholder="mysite"
              boxShadow="0 1px 6px 0 rgb(32 33 36 / 28%)"
              placeholder="在Google上搜索，或者输入一个网址"
              borderRadius={999}
            />
            <InputRightElement children={<TiMicrophone color="green.500" />} />
          </InputGroup>
        </Box>
        {/* 弹框 */}
        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>添加快捷方式</ModalHeader>
            <ModalCloseButton _focus={{ boxShadow: "0 0 0 #888888" }} />
            <ModalBody pb={6}>
              <FormControl>
                <FormLabel>名称</FormLabel>
                <Input
                  onChange={(e) =>
                    setUrlObj({ ...urlObj, name: e.target.value })
                  }
                />
              </FormControl>

              <FormControl mt={4}>
                <FormLabel>网址</FormLabel>
                <Input
                  onChange={(e) =>
                    setUrlObj({ ...urlObj, url: "https://" + e.target.value })
                  }
                />
              </FormControl>
            </ModalBody>

            <ModalFooter>
              <Button mr={3} onClick={onClose}>
                取消
              </Button>
              <Button colorScheme="blue" onClick={aDDListItem}>
                完成
              </Button>
            </ModalFooter>
          </ModalContent>
        </Modal>
        <Grid templateColumns="repeat(4, 1fr)" w={465} gap={1}>
          {urlData.map((urlDataItem) => (
              <Box
                key={urlDataItem.uuid}
                w="112"
                h="112"
                position="relative"
                borderRadius={4}
                _hover={{ backgroundColor: "#2021241a" }}
                display="flex"
                flexDirection="column"
                alignItems="center"
                cursor="pointer"
                onClick={window.location.href=urlDataItem.url}
                onMouseEnter={(e) =>
                  setHoverType(e._reactName == "onMouseEnter" ? true : false)
                }
                onMouseLeave={(e) =>
                  setHoverType(e._reactName == "onMouseEnter" ? true : false)
                }
              >
                <Box
                  w="28px"
                  h="28px"
                  bg="#F1F3F4"
                  borderRadius="999px"
                  style={iconStyle}
                  _hover={{ backgroundColor: "#d3d3d4" }}
                  background={{ backgroundColor: "#d3d3d400" }}
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  cursor="pointer"
                  onClick={(e) => {
                    DeleteListItem(urlDataItem, e);
                  }}
                >
                  <IoClose
                    fontSize="18px"
                    opacity={hoverType ? 1 : 0}
                    style={deplay}
                    color="#80868b"
                  />
                </Box>
                <Flex
                  marginTop="16px"
                  w="48px"
                  h="48px"
                  bg="#F1F3F4"
                  borderRadius="999px"
                  alignItems="center"
                  justifyContent="center"
                >
                  <img src={urlDataItem.img}></img>
                </Flex>
                <Box
                  padding="2px 8px"
                  marginTop="6px"
                  display="flex"
                  alignItems="center"
                  justifyContent="center"
                  w="88px"
                  fontSize="12px"
                  height="32px"
                  lineHeight="16px"
                >
                  <span>{urlDataItem.name}</span>
                </Box>
              </Box>
          ))}

          <Box
            w="112"
            h="112"
            position="relative"
            borderRadius={4}
            _hover={{ backgroundColor: "#2021241a" }}
            display="flex"
            flexDirection="column"
            alignItems="center"
            cursor="pointer"
            onClick={onOpen}
          >
            <Flex
              marginTop="16px"
              w="48px"
              h="48px"
              bg="#F1F3F4"
              borderRadius="999px"
              alignItems="center"
              justifyContent="center"
            >
              <IoAdd fontSize="24px"></IoAdd>
            </Flex>

            <Box
              padding="2px 8px"
              marginTop="6px"
              display="flex"
              alignItems="center"
              w="88px"
              fontSize="12px"
              height="32px"
              lineHeight="16px"
            >
              <span>添加快捷方式</span>
            </Box>
          </Box>
        </Grid>
      </main>
    </div>
  );
}
